<template>
  <div class="base-container">
    <t-form ref="form" :data="queryParams" label-width="64"
            @submit="()=>{this.pagination.current=1;this.getList();}"
            @reset="()=>{this.pagination.current=1;this.getList();}">
      <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="系统名称" name="systemName">
            <t-input
              v-model="queryParams.systemName"
              clearable
              placeholder="请输入系统名称"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="系统状态" name="systemStatus">
            <t-select style="width: 240px" placeholder="状态" :options="dict.type.system_status" 
              v-model="queryParams.systemStatus">
            </t-select>
          </t-form-item>
          <t-form-item label="得分区间">
            <t-input
              v-model="queryParams.startScore"
              clearable
              placeholder="大于等于"
              style="width: 120px"
            />
            -
            <t-input
              v-model="queryParams.endScore"
              clearable
              placeholder="小于等于"
              style="width: 120px"
            />
          </t-form-item>
          <t-form-item label="评价状态" name="approveStatus">
            <t-select style="width: 240px" placeholder="状态" :options="dict.type.approve_status"
              v-model="queryParams.approveStatus">
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="1" class="operation-container">
          <t-button theme="primary" type="submit"> 查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <!-- 系统列表内容 -->
    <t-table
    rowKey="id"
    :data="data"
    :columns="columns"
    hover
    :pagination="pagination"
    :loading="dataLoading"
  >
    <template #systemStatus="{row}">
      {{ row.systemStatus | filterByDict(dict.type.system_status) }}
    </template>
    <template #hostDepts="{row}">
      <div v-for="(item,index) in row.hostDepts" :key="index">{{ item.deptName }}</div>
    </template>
    <template #dutyDepts="{row}">
      <div v-for="(item,index) in row.dutyDepts" :key="index">{{ item.deptName }}</div>
    </template>
    <template #constructionDepts="{row}">
      <div v-for="(item,index) in row.constructionDepts" :key="index">{{ item.deptName }}</div>
    </template>
    <template #aboutMembers="{row}">
      <div v-for="(item,index) in row.aboutMembers.filter(val => val.memberType === '1')" :key="index">{{ item.name }}</div>
    </template>
    <template #aboutMembers2="{row}">
      <div v-for="(item,index) in row.aboutMembers.filter(val => val.memberType !== '1')" :key="index">{{item.memberType | filterByDict(dict.type.yxjk_member_type)}}：{{ item.name }}</div>
    </template>
  </t-table>
  </div>
</template>

<script>

export default {
  dicts: ["system_status", "approve_status"],
  data(){
    return {
      queryParams: {
        pageNum:1,
        pageSize:10,
        systemName: '',
        systemStatus: '',
        startScore: '',
        endScore:'',
        approveStatus:'',
      },
      dataLoading:false,
      data: [],
      columns: [
        {
          colKey: "name",
          title: "系统名称",
          align: "center",
        },
        {
          colKey: "linker",
          title: "应用联系人",
          align: "center",
        },
        {
          colKey: "dutyPerson",
          title: "建设责任人",
          align: "center",
        },
        {
          colKey: "liaisonPerson",
          title: "建设联络员",
          align: "center",
        },
        {
          colKey: "liaisonDate",
          title: "建设年月",
          align: "center",

        },
        {
          colKey: "completeDate",
          title: "完成年月",
          align: "center",
        },
        {
          colKey: "score",
          title: "应用评价分数",
          align: "center",
        },
        {
          colKey: "approveStatus",
          title: "评价状态",
          align: "center",
        },
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination, pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
    }
  },
  created(){
    this.getList();
  },
  methods:{
    getList(){
      this.dataLoading = true;
      this.$api.yxjk.review.scoreList(this.queryParams).then(response => {
        this.pagination.total = response.total;
        this.data = response.rows;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
  }
}
</script>
